<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="form" :model="searchData" label-width="80px" size="mini">
        <el-row :gutter="10">
          <el-col :span="3.5">
            <el-form-item label="作业区">
              <el-select
                v-model="searchData.cycledes_areano"
                clearable
                placeholder="请选择作业区"
                style="width: 130px"
              >
                <el-option
                  v-for="(item, i) in opeArea"
                  :key="i"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="起始日期">
              <el-date-picker
                v-model="searchData.startTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 130px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="截止日期">
              <el-date-picker
                v-model="searchData.endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 130px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="是否录入">
              <el-select
                v-model="searchData.cycledes_desstate"
                clearable
                placeholder="请选择状态"
                style="width: 130px"
              >
                <el-option label="已录入" value="1" />
                <el-option label="未录入" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="是否实施">
              <el-select
                v-model="searchData.plan_state"
                clearable
                placeholder="请选择状态"
                style="width: 130px"
              >
                <el-option label="已实施" value="1" />
                <el-option label="未实施" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-button
                type="primary"
                size="mini"
                @click="search"
              >查 询</el-button>
              <el-button size="mini" @click="reset">清 空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        height="900"
        border
        :header-cell-style="{height:'30px',padding:'0px',fontSize:'14px'}"
        style="width: 100%;font-size: 13px"
        :row-style="{height:'20px'}"
        :cell-style="{padding:'1px'}">
        <el-table-column type="index" width="50" />
        <el-table-column
          prop="cycledes_wellname"
          label="井号"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_areano"
          label="作业区"
          width="130"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_stationno"
          label="站号"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_blockno"
          label="区块"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_strata"
          label="层位"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_fluidvol"
          label="液量"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_oilvol"
          label="油量"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_watervol"
          label="含水"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_pumpdepth"
          label="泵挂深度"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_hotwashcycle"
          label="清蜡周期"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_craft"
          label="清蜡工艺"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.cycledes_craft == '1'
                ? '热洗'
                : scope.row.cycledes_craft== '2'
                  ? '化防'
                  : scope.row.cycledes_craft == '3'
                    ? '化防+热洗'
                    : '冷洗'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="cycledes_hotwashamount"
          label="热洗用液"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_plandate"
          label="理论实施日期"
          sortable
          width="130"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="cycledes_impledate"
          label="实际实施日期"
          sortable
          width="130"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="plan_state"
          label="是否实施"
          sortable
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.plan_state == '1'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          label="清防蜡设计"
          header-align="center"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 5px"
              :disabled="scope.row.cycledes_desstate == '1'"
              @click="goDetail(scope.row)"
            >录入</el-link>
            <el-link
              type="primary"
              :underline="false"
              :disabled="
                scope.row.cycledes_desstate == '0' ||
                  scope.row.cycledes_desstate == null
              "
              @click="goDetail(scope.row.cycledes_id)"
            >查看</el-link>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @changePage="getListPage1(arguments)"
        @size-change="handleSizeChange"
      />
    </div>

    <el-dialog
      title="清蜡措施设计书（正常周期热洗）"
      :visible.sync="showDetail"
      fullscreen
    >
      <el-form ref="form" :model="inputData" :rules="rules" label-width="200px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="单位" prop="cycledes_areano">
              <el-select
                v-model="inputData.cycledes_areano"
                placeholder="请选择单位"
                disabled
              >
                <el-option
                  v-for="(item, i) in opeArea"
                  :key="i"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="井号" prop="cycledes_wellname">
              <el-input
                v-model="inputData.cycledes_wellname"
                clearable
                placeholder="请输入井号"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="用液量（m3）" prop="cycledes_amountofliquid">
              <el-input
                v-model="inputData.cycledes_amountofliquid"
                placeholder="请输入内容"
                :readonly="readonly"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际实施时间" prop="cycledes_impledate">
              <el-date-picker
                v-model="inputData.cycledes_impledate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :readonly="readonly"
                :picker-options="pickerOptions1"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="前置量（m3）" prop="cycledes_preload">
              <el-input
                v-model="inputData.cycledes_preload"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="前置量-温度上限（℃）"
              prop="cycledes_preloadupperlimit"
            >
              <el-input
                v-model="inputData.cycledes_preloadupperlimit"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="前置量-温度下限（℃）"
              prop="cycledes_preloadlowlimit"
            >
              <el-input
                v-model="inputData.cycledes_preloadlowlimit"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="热洗量（m3）" prop="cycledes_hotwashload">
              <el-input
                v-model="inputData.cycledes_hotwashload"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="热洗量-温度上限（℃）"
              prop="cycledes_hotwashupperlimit"
            >
              <el-input
                v-model="inputData.cycledes_hotwashupperlimit"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="热洗量-温度下限（℃）"
              prop="cycledes_hotwashlowlimit"
            >
              <el-input
                v-model="inputData.cycledes_hotwashlowlimit"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="顶替量（m3）" prop="cycledes_replaceload">
              <el-input
                v-model="inputData.cycledes_replaceload"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="顶替量-温度上限（℃）"
              prop="cycledes_replaceloadupperlimit"
            >
              <el-input
                v-model="inputData.cycledes_replaceloadupperlimit"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="顶替量-温度下限（℃）"
              prop="cycledes_replaceloadlowlimit"
            >
              <el-input
                v-model="inputData.cycledes_replaceloadlowlimit"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="加药用量(3）"
              prop="cycledes_addmed"
            >
              <el-input
                v-model="inputData.cycledes_addmed"
                :readonly="readonly"
                placeholder="请输入内容"
                style="width: 202px"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item style="margin: 30px">
          <el-button
            type="primary"
            :disabled="readonly"
            @click="submit()"
          >立即创建</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
export default {
  components: { Pagination },
  data() {
    return {
      searchData: {},
      tableData: [],
      rules: {
        cycledes_areano: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_wellname: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_amountofliquid: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_impledate: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_preload: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_preloadupperlimit: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_preloadlowlimit: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_hotwashload: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_hotwashupperlimit: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_hotwashlowlimit: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_replaceload: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_replaceloadupperlimit: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_replaceloadlowlimit: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        },
        cycledes_addmed: {
          message: '请输入必填项',
          trigger: 'blur'
        }
      },
      opeArea:  ['第一采油作业区','第二采油作业区', '第三采油作业区','第五采油作业区','第七采油作业区','第八采油作业区','第九采油作业区','运行维护一中心'],
      inputData: {},
      page: 1,
      limit: 50,
      total: 0,
      showDetail: false,
      readonly: false,
      pickerOptions1: { //结束时间不能大于开始时间
        disabledDate: (time) => {
          if (this.searchData.endTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.searchData.endTime).getTime()
            )
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
    }
  },
  created() {
    this.getListPage(this.page, this.limit, this.searchData)
  },
  methods: {
    getListPage(pageNum, pageSize, data) {
      this.$http
        .post('/cycleHotwashdes/pageQuery', {
          pageNum,
          pageSize,
          data
        })
        .then(({ data: { data: res }}) => {
          this.tableData = res.records
          this.total = res.total
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    //页码变动
    getListPage1(msg){
      let pageNum=msg[0]
      let pageSize=msg[1]
      let data=this.searchData
      this.$http.post('/cycleHotwashdes/pageQuery', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    //每页记录数变动
    handleSizeChange(size){
      let pageSize=this.page
      let pageNum=size
      let data=this.searchData
      this.$http.post('/cycleHotwashdes/pageQuery', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    changePage(pageNum, pageSize) {
      this.getListPage(pageNum, pageSize, this.searchData)
    },
    // 清蜡措施设计书表单，传参为查看，设置只读，请求数据；不传参则为新增，不设只读，直接打开
    goDetail(id) {
      if (typeof id === 'string') {
        this.readonly = true
        this.$http
          .post('/cycleHotwashdes/queryById', { cycledes_id: id })
          .then(({ data: { data: res }}) => {
            this.inputData = res
            this.showDetail = true
          })
          .catch((err) => {
            this.$message.error(err)
          })
      } else {
        this.inputData = id
        this.readonly = false
        this.showDetail = true
      }
    },
    search() {
      this.page = 1
      this.getListPage(this.page, this.limit, this.searchData)
    },
    reset() {
      this.searchData = {}
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http
            .post('/cycleHotwashdes/update', this.inputData)
            .then(() => {
              this.$message.success('录入成功')
              this.showDetail = false
              this.inputData = {}
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    },
    close() {
      this.showDetail = false
    }
  }
}
</script>

<style scoped>
</style>
